<script>
import Back from '../components/backNavbar.vue';
import { login } from '../apis/api.js'
export default {
	components: {
		Back
	},
	data() {
		return {
			user: {
				userAccount: '',
        userPassword: '',
			}

		};
	},
	methods: {
		//路由跳转
		next(url) {
			this.$router.push(url);
		},
		//登录功能
		login() {
			login(this.user).then(res => {
				if (res.data.code == 200) {
					this.$message({
						message: '登录成功',
						type: 'success'
					})
					
					this.$router.push('/')	
					localStorage.setItem('user', JSON.stringify(res.data))
					localStorage.setItem('token', res.data.data.token)
				}
				else {
					this.$message({
						message: "登录失败",
						type: 'error'
					})
				}
			}).catch
				(err => {
					this.$message({
						message: "登录失败",
						type: 'error'
					})
				})
		}
	}
};
</script>

<template>
	<Back :title="'用户登录'"></Back>
	<div id="login">
		<h1>Gate.io</h1>
		<el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="left">
			<el-form-item>
				<el-input v-model="user.userAccount" placeholder="请输入登录账号"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="请输入登录密码" v-model="user.userPassword" show-userPassword></el-input>
			</el-form-item>
			<p class="forgetpass"><el-button type="text">忘记密码？</el-button></p>
			<el-button type="primary" @click="login" class="login">立即登录</el-button>

		</el-form>
		<p class="register">还不是gate.io用户?<el-button type="text" @click="next('/register')"
				style="margin-top: -3px;">立即注册？</el-button></p>
	</div>

</template>

<style>
#login h1 {
	text-align: center;
	margin: 40px 0;
	font-size: 40px;
	width: 100%;
}

#login .el-input {
	width: 80%;
	margin: 20px auto;
}

#login .demo-form-inline {
	width: 80%;
}

#login .el-form {
	width: 350px;
	margin-left: 80px;
}

#login .el-input {
	margin: 5px;
	height: 40px;
	width: 340px;
}

.forgetpass {
	float: right;
	margin-top: -20px;
}

.login {
	margin: 50px 0;
	height: 40px;
	width: 100%;
}

#login .register {
	text-align: center;
}
</style>